<template>
  <div style="background: rgba(0, 0, 0, 0.3);">
    <!-- <transition name="el-fade-in-linear">
      <loading v-show="loading" :back="back" />
    </transition> -->
    <transition name="el-collapse-transition">
      <index  :back_image="back_image" :title="title" :style="{height: windowHeight+'px'}" />
    </transition>

  </div>
</template>

<script>
import index from './components/index.vue'
import loading from './components/loading.vue'

export default {
  components: {
    index,
    loading
  },
  data() {
    return {
      windowHeight: document.documentElement.clientHeight, // 实时屏幕高度,,
      back: false,
      back_image: false,
      loading: true,
      title: false
    }
  },
  created() {
    console.log(this.$store.state.public.config)
    this.in_back(this.$store.state.public.config)
  },

  methods: {
    in_back(back) {
      if (!back) {
        var than = this
        setTimeout(function() {
          than.in_back(than.$store.state.public.config)
        }, 200)
        return
      }
      this.title = back.Company_name.value
      var b = back.back.value
      const image = new Image()
      image.src = b

      image.onload = () => {
        // count++
        this.back = true

        var than = this
        setTimeout(function() {
          than.loading = false

          setTimeout(function() {
            than.back_image = b
          }, 200)

          console.log(than.back)
        }, 1000)
      }
    }
  }
}
</script>

<style>
</style>
